<template>
	<view class="">
		<!-- 顶部导航栏 -->
		<view  class="topbox mar-top-30">		
			<!-- 搜索框 -->
			<view class="input-box">
				<input class="s-txt" type="text" placeholder="请输入关键字进行搜索"/>
				<view class="icon search">
					<image src="https://web.suqzp.com/public/search.png"></image>
				</view>
			</view>			
		</view>	
		<!-- 内容切换 -->
		<view class="order_centext">			
			<view class="nav_item">
				<view class="scroll-items">
					<view class="item" v-for="(item,index) in orderList" :key="index" >
						<view class="jd-top-wap">						
							<view class="flex jcsb mar-top-15"  style="align-items: center;">
								<view class="flex-1 flex">
									<view class="jd-img">
										<image :src="item.src"></image>
									</view>
									<view class="mar-left-20 flex-1">
										<view class="flex jcsb">
											<view class="fc-00 fs-28 two-ellipsis">{{item.title}}</view>
											<text class="yzb yzb-next"></text>
										</view>
										<view class="fc-66 fs-26 mar-top-10">{{item.address}}</view>
										<view class="fs-26 fc-66">成交金额：{{item.price}}</view>
									</view>
								</view>
							</view>							
						</view>						
					</view>
				</view>
				
			</view>		
		</view>
	</view>
</template>

<script>
export default {
		data() {
			return {				
				orderList: [
					{						
						src:'',
						title:'花都城市门店',
						address:'广东省xxxxxxxx',
						price:120,
					},
					{
						src:'',
						title:'花都城市门店',
						address:'广东省xxxxxxxx',
						price:120,
					}
				],
				
			}
		},
		onLoad(option) {			
			
		},
		mounted() {		
			
		},		
		methods: {					
			
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
		.topbox {
			.input-box {
				width:92%;
				margin: 0 auto 20rpx auto;
				height: 80rpx;
				background-color: #fff;
				position: relative;
				display: flex;
				align-items: center;
				flex: 1;
				border-radius: 100rpx;
				.s-txt{				
					font-size: 28rpx;
					color: #999;
					width: 100%;
				}
				.icon {
					display: flex;
					align-items: center;
					position: absolute;
					top:28rpx;
					left: 32rpx;
					image{
						width: 30rpx;
						height: 30rpx;
						display: inline-block;
						display: flex;
						align-items: center;
					}
				}
				input {
					padding-left:72rpx;
					height: 28rpx;
					font-size: 28rpx;
				}
			}	
		}
		.flex-1{
			flex: 1;
		}
		.lin-60{
			line-height: 60rpx;
		}		
		.nav{
			background-color: #fff;	
			position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			height: 100rpx;
			.tab-scroll{
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;
				.tab-scroll_box{
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;
					.tab-scroll_item{
						width: 33%;
						line-height: 60rpx;
						margin-right:13rpx;
						flex-shrink: 0;
						padding-bottom:10px;
						display: flex;
						justify-content: center;
						font-size: 16px;
						padding-top: 10px;
						position: relative;
						.icons{
							display: none;
							width: 80rpx;
							height:6rpx;
							background: #84C0F4;
							border-radius: 4rpx;
							opacity: 1;	
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							margin: auto;
						}
					}
					.active{
						color:#333 ;
					}
					.active>.icons{
						display: block;
					}	
					/* 隐藏滚动条，但依旧具备可以滚动的功能 */
					/deep/.uni-scroll-view::-webkit-scrollbar {
						display: none
					}
				}
			}
		}
		.scroll-items{	
			.item{
				background-color: #fff;
				margin: 0 25rpx 20rpx;
				border-radius: 10rpx;
				.jd-top-wap{
					padding: 30rpx 32rpx;
					.jd-img{
						width: 84rpx;
						height: 84rpx;
						border-radius: 8rpx;
						image{
							width: 84rpx;
							height: 84rpx;
							display: block;					
							border-radius: 8rpx;
						}
					}
					.jd-info{
						flex: 1;
						.w-205{
							width: 410rpx;
							display: block;
						}
					}
				}
				.opera-btn{
					justify-content: flex-end;
					padding: 24rpx 32rpx;
					button{
						min-width: 60rpx;
						padding: 0 22rpx;
						height: 60rpx;
						background: #FFFFFF;
						border-radius: 4rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 28rpx;
						color: #8EC7F9;
						border: 1px solid #8EC7F9;
					}
					.pay-but{
						background: #7BC2F8;
						color: #fff;
						margin-left: 20rpx;
					}
					.evalbut{
						border: 1px solid #7BC2F8;
						background: #fff;
						color: #7BC2F8;
					}
				}
			}
		}
	}
	
</style>
